<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="api.GetAuthorizationDetailedInfoList"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #tableHeader>
				<el-descriptions :title="cominfo.companyName">
					<el-descriptions-item label="使用期限：">{{ cominfo.usageTime }}</el-descriptions-item>
					<el-descriptions-item label="使用周期：">{{ cominfo.authorizeTIme }}</el-descriptions-item>
					<el-descriptions-item label="剩余使用天数：">{{ cominfo.daysRemaining }} </el-descriptions-item>
					<el-descriptions-item label="授权码总数：">{{ cominfo.clientAuthorizationCodeNumber }}</el-descriptions-item>
					<el-descriptions-item label="剩余授权码：">{{ cominfo.surplusAuthorization }}</el-descriptions-item>
					<template #extra>
						<el-button type="primary" @click="contactuser">联系客户</el-button>
					</template>
				</el-descriptions>
			</template>
			<template #createTime="scope">
				{{ dateFormat(scope.row.createTime) }}
			</template>
			<template #userTel="scope">
				{{ phoneFormat(scope.row.userTel) }}
			</template>
		</proTable>
	</div>
</template>
<script lang="ts" setup name="logs">
import { ref, reactive, computed } from "vue";
import api from "@/api/modules/companyInfo";
import { ColumnProps } from "@/components/ProTable/interface";
import proTable from "@/components/ProTable/index.vue";
import { ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import { dateFormat, phoneFormat } from "@/utils/util";
// 路由
const route = useRoute();
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	companyId: route.query.id,
	states: 1
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
const cominfo = ref<any>({});
//获取商户授权基本信息
const getcompanyinfo = async () => {
	let ret = await api.GetAuthorizationCompanyInfo({ companyId: route.query.id });
	let { data } = ret.result;
	cominfo.value = data;
};
getcompanyinfo();
// 表格配置项
const columns = computed((): Partial<ColumnProps>[] => {
	let data: Partial<ColumnProps>[] = [
		{ prop: "userName", label: "使用人" },
		{ prop: "userTel", label: "联系电话" },
		{ prop: "authorizationSerialNumber", label: "授权电脑序列号" },
		{ prop: "createTime", label: "安装日期" }
	];
	return data;
});
//联系客户
const contactuser = () => {
	ElMessageBox.alert(
		`<p><strong>客户姓名：</strong>${cominfo.value.companyUserName}</p></br><p><strong>客户姓名：</strong>${cominfo.value.companyUserTel}</p>`,
		"联系客户",
		{
			dangerouslyUseHTMLString: true
		}
	);
};
</script>
<style lang="scss" scoped>
::v-deep.table-box .table-header .header-button-lf,
.table-main .table-header .header-button-lf {
	float: none !important;
}
</style>
